<template>
	<view class="container">
		<view class="img">
			<image src="../../../static/网易云.png"></image>
		</view>
		<view class="userinfo">
			<input placeholder="请输入手机号" v-model="phoneNumber" type="number"/>
			<input placeholder="请输入密码" password v-model="password"/>
		</view>
		<view class="input">
			<button class="denglu" @click="login">登陆</button>
		</view>
		<button class="zhuce" @click="zhuce">注册</button>
	</view>
</template>

<script>
	import {login} from '../../../api/login/login.js'
	export default {
		data() {
			return {
				phoneNumber:null,
				password:''
			}
		},
		methods:{
			zhuce(){
				uni.navigateTo({
					url:'../../ZhuCe/ZhuCe'
				})
			},
			login(){
				if(this.phoneNumber === null){
					uni.showToast({
					    title: '请输入手机号',
					    duration: 2000,
							icon:'none'
					})
				}else if(this.password === ''){
					uni.showToast({
					    title: '请输入密码',
					    duration: 2000,
							icon:'none'
					})
				}else if(this.phoneNumber.length != 11){
					uni.showToast({
					    title: '请输入正确的手机号',
					    duration: 2000,
							icon:'none'
					})
				}else{
					login({phone:this.phoneNumber,password:this.password}).then(res => {
						console.log(res)
						if(res.code === 200){
							uni.navigateTo({
								url:'../../User/User?id=' + res.profile.userId
							})
						}else if(res.code === 502){
							uni.showToast({
							    title: '密码错误',
							    duration: 2000,
									icon:'none'
							})
						}else if(res.code === 501){
							uni.showToast({
							    title: '账号不存在',
							    duration: 2000,
									icon:'none'
							})
						}
					}).catch(err => {
						uni.showToast({
						    title: err.msg,
						    duration: 2000,
								icon:'none'
						})
					})
				}
			}
		},
		onLoad(){
			
		}
	}
</script>

<style lang="scss">
	page{
		//background-color: $red;
		.container{
			width: 750rpx;
			.img{
				width: 100%;
				height: 350rpx;
				//background-color: yellow;
				display: flex;
				justify-content: center;
				align-items: flex-end;
				image{
					width: 100rpx;
					height: 100rpx;
				}
			}
			.userinfo{
				width: 100%;
				height: 300rpx;
				//background-color: green;
				display: flex;
				flex-direction:column;
				align-items: center;
				justify-content: center;
				input{
					width: 440rpx;
					height: 64rpx;
					font-size: 24rpx;
					border: 1px solid #cdcdcd;
					margin-bottom: 20rpx;
					padding-left: 12rpx;
				}
			}
			.input{
				width: 750rpx;
				height: 200rpx;
				//background-color: blue;
				display: flex;
				align-items: center;
				justify-content: space-around;
				//margin-top: 300rpx;
				.denglu{
					width:500rpx;
					border-radius: 200rpx;
					color: white;
					background-color: #007AFF;
				}
			}
			.zhuce{
				width:500rpx;
				border-radius: 200rpx;
				border: 1px solid #cdcdcd;
				// color: white;
				// background-color: #007AFF;
			}
		}
	}
</style>
